{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码重置 - 活动聚</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* 统一 html 和 body 的背景色及高度 */
    html, body {
        background: linear-gradient(135deg, #d2f1dc 0%, #93c88b 100%);
        margin: 0;
        padding: 0;
        height: 100%;
        overflow-x: hidden;
    }

    body::before, body::after {
        content: '';
        position: fixed; /* 固定定位，确保背景元素不随页面滚动 */
        z-index: 0;
    }

    body::before {
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        top: -150px;
        left: -150px;
        animation: float 15s infinite ease-in-out;
    }

    body::after {
        width: 300px;
        height: 300px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 100% 0 0 0;
        bottom: 0;
        right: 0;
        animation: float 20s infinite ease-in-out 2s;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow-y: auto; /* 允许垂直滚动 */
        min-height: 100vh; /* 确保至少占满屏幕高度 */
        margin: 0;
        padding: 20px;
        width: 100%;
    }

    .home-btn {
        position: fixed;
        top: 30px;
        left: 30px;
        width: 50px;
        height: 50px;
        background: #008F32;
        color: #ffffff;
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 20px;
        text-decoration: none;
        z-index: 1000;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .home-btn:hover {
        background: #006624;
        transform: scale(1.1) rotate(10deg);
    }

    .reset-container {
        width: 100%;
        max-width: 420px;
        padding: 20px;
        position: relative;
        z-index: 10;
        margin: auto; /* 确保居中 */
    }

    .reset-card {
        padding: 60px 40px;
        border-radius: 12px;
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
        transform-style: preserve-3d;
        transition: all 0.1s ease-out;
        position: relative;
        overflow: hidden;
        background-color: rgba(255, 255, 255, 0.7);
    }

    .reset-card::after {
        content: '';
        position: absolute;
        inset: -10px;
        background: inherit;
        border-radius: 16px;
        z-index: -1;
        filter: blur(10px);
        opacity: 0.7;
        transform: translateZ(-1px);
    }

    .reset-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 10px;
        background: linear-gradient(90deg, #008F32, #99DBB1);
    }

    .reset-header {
        text-align: center;
        margin-bottom: 40px;
        position: relative;
    }

    .reset-header h1 {
        font-size: 32px;
        font-weight: 700;
        color: #333;
        margin-bottom: 10px;
        letter-spacing: -1px;
        position: relative;
        display: inline-block;
    }

    .reset-header h1::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 3px;
        background: #008F32;
        border-radius: 3px;
        transition: width 0.3s;
    }

    .reset-card:hover .reset-header h1::after {
        width: 60px;
    }

    .reset-header p {
        font-size: 14px;
        color: #666666;
        font-weight: 400;
        opacity: 0.8;
    }

    .reset-body {
        margin-bottom: 30px;
    }

    .form-group {
        margin-bottom: 25px;
        position: relative;
    }

    .form-label {
        position: static !important;
        display: block;
        font-weight: 600;
        color: #333 !important;
        margin-bottom: 10px;
        transform: none !important;
        opacity: 1 !important;
        top: auto !important;
        left: auto !important;
        font-size: 13px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .form-control {
        width: 100%;
        border: none;
        border-bottom: 2px solid #ddd;
        padding: 12px 0;
        font-size: 16px;
        transition: all 0.3s;
        background: transparent;
        color: #333;
        position: relative;
        z-index: 1;
    }

    .form-control:focus {
        outline: none;
        border-bottom-color: #008F32;
    }

    .form-control:focus + .input-underline {
        transform: scaleX(1);
    }

    .input-underline {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: #008F32;
        transform: scaleX(0);
        transition: transform 0.3s ease;
        transform-origin: left center;
    }

    .form-control::placeholder {
        color: #ccc;
        transition: all 0.3s;
    }

    .form-control:focus::placeholder {
        color: #999;
        transform: translateY(-10px);
        font-size: 12px;
    }

    .btn-reset {
        background: #008F32;
        color: #ffffff;
        border: none;
        padding: 16px;
        font-size: 14px;
        font-weight: 600;
        width: 100%;
        transition: all 0.3s;
        cursor: pointer;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-top: 10px;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
    }

    .btn-reset::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: all 0.6s;
    }

    .btn-reset:hover {
        background: #006624;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 143, 50, 0.3);
    }

    .btn-reset:hover::before {
        left: 100%;
    }

    .btn-reset:active {
        transform: translateY(0);
    }

    .input-group {
        display: flex;
        gap: 15px;
        align-items: flex-end;
    }

    .input-group .form-control {
        flex: 1;
    }

    .btn-send-code {
        background: transparent;
        color: #008F32;
        border: 2px solid #008F32;
        padding: 12px 20px;
        white-space: nowrap;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        border-radius: 4px;
    }

    .btn-send-code:hover {
        background: #008F32;
        color: #ffffff;
        transform: translateY(-2px);
    }

    .btn-send-code:disabled {
        background: transparent;
        color: #ccc;
        border-color: #ccc;
        cursor: not-allowed;
        transform: none;
    }

    .reset-footer {
        text-align: center;
        padding-top: 30px;
        border-top: 1px solid #eeeeee;
        margin-top: 30px;
    }

    .reset-footer a {
        color: #008F32;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        transition: all 0.3s;
        letter-spacing: 0.5px;
        position: relative;
    }

    .reset-footer a::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 1px;
        background: #008F32;
        transition: width 0.3s;
    }

    .reset-footer a:hover {
        color: #006624;
    }

    .reset-footer a:hover::after {
        width: 100%;
    }

    .error-msg {
        color: #dc3545;
        font-size: 12px;
        margin-top: 8px;
        font-weight: 500;
    }

    @keyframes float {
        0%, 100% {
            transform: translateY(0) rotate(0deg);
        }
        50% {
            transform: translateY(-30px) rotate(5deg);
        }
    }

    @media (max-width: 576px) {
        .reset-card {
            padding: 40px 20px;
        }

        .reset-footer a {
            margin: 0 8px;
            font-size: 12px;
        }
    }
</style>
</head>
<body>

<a href="{% url 'home' %}" class="home-btn">
    <i class="bi bi-house-fill"></i>
</a>

<div class="reset-container">
    <div class="reset-card" id="resetCard">
        <div class="reset-header">
            <h1>重置密码</h1>
            <p>找回您的账号</p>
        </div>

        <div class="reset-body">
            <form id="resetForm">
                {% csrf_token %}

                <div class="form-group">
                    <label for="email" class="form-label">邮箱</label>
                    <input type="email" class="form-control" id="email" name="email"
                           placeholder="请输入注册邮箱" required>
                    <div class="input-underline"></div>
                    <div class="error-msg" id="emailError"></div>
                </div>

                <div class="form-group">
                    <label for="verify_code" class="form-label">验证码</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="verify_code" name="verify_code"
                               placeholder="6位验证码" maxlength="6" required>
                        <div class="input-underline"></div>
                        <button type="button" class="btn-send-code" id="sendCodeBtn" onclick="sendVerifyCode()">
                            发送
                        </button>
                    </div>
                    <div class="error-msg" id="codeError"></div>
                </div>

                <div class="form-group">
                    <label for="new_password" class="form-label">新密码</label>
                    <input type="password" class="form-control" id="new_password" name="new_password"
                           placeholder="至少6位" required>
                    <div class="input-underline"></div>
                    <div class="error-msg" id="pwdError"></div>
                </div>

                <div class="form-group">
                    <label for="confirm_password" class="form-label">确认密码</label>
                    <input type="password" class="form-control" id="confirm_password" name="confirm_password"
                           placeholder="再次输入新密码" required>
                    <div class="input-underline"></div>
                    <div class="error-msg" id="confirmPwdError"></div>
                </div>

                <button type="submit" class="btn-reset">重置密码</button>
            </form>
        </div>

        <div class="reset-footer">
            <a href="{% url 'users:login' %}">返回登录</a>
        </div>
    </div>
</div>

<script>
// 鼠标跟踪效果实现
document.addEventListener('DOMContentLoaded', () => {
    const resetCard = document.getElementById('resetCard');
    const body = document.body;

    const getCenter = () => {
        return {
            x: window.innerWidth / 2,
            y: window.innerHeight / 2
        };
    };

    let center = getCenter();

    body.addEventListener('mousemove', (e) => {
        const xOffset = (e.clientX - center.x) / center.x;
        const yOffset = (e.clientY - center.y) / center.y;

        const maxRotateX = 5;
        const maxRotateY = 10;

        const rotateX = yOffset * maxRotateX;
        const rotateY = -xOffset * maxRotateY;

        resetCard.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;

        const shadowX = xOffset * 20;
        const shadowY = yOffset * 20;
        resetCard.style.boxShadow = `
            ${shadowX}px ${shadowY}px 30px rgba(0, 0, 0, 0.1),
            ${shadowX * 0.5}px ${shadowY * 0.5}px 15px rgba(0, 0, 0, 0.05)
        `;
    });

    window.addEventListener('resize', () => {
        center = getCenter();
    });

    resetCard.style.opacity = '0';
    resetCard.style.transform = 'perspective(1000px) rotateX(5deg) rotateY(5deg) translateY(30px)';

    setTimeout(() => {
        resetCard.style.transition = 'all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
        resetCard.style.opacity = '1';
        resetCard.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(0)';
    }, 100);
});

let countdown = 0;
let timer = null;

function sendVerifyCode() {
    const email = document.getElementById('email').value.trim();
    const btn = document.getElementById('sendCodeBtn');
    const emailError = document.getElementById('emailError');

    emailError.textContent = '';

    if (!email) {
        emailError.textContent = '请输入邮箱地址';
        return;
    }

    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
        emailError.textContent = '请输入有效的邮箱地址';
        return;
    }

    btn.disabled = true;
    btn.textContent = '发送中...';

    fetch("{% url 'users:send_verify_code' %}", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        body: `email=${encodeURIComponent(email)}&type=reset`
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('验证码已发送到您的邮箱，请查收（含垃圾邮件箱）');
            startCountdown();
        } else {
            emailError.textContent = data.msg || '发送失败，请重试';
            btn.disabled = false;
            btn.textContent = '发送验证码';
        }
    })
    .catch(error => {
        emailError.textContent = '网络错误，请稍后重试';
        btn.disabled = false;
        btn.textContent = '发送验证码';
    });
}

function startCountdown() {
    countdown = 60;
    const btn = document.getElementById('sendCodeBtn');

    timer = setInterval(() => {
        countdown--;
        btn.textContent = `${countdown}秒后重发`;

        if (countdown <= 0) {
            clearInterval(timer);
            btn.disabled = false;
            btn.textContent = '发送验证码';
        }
    }, 1000);
}

document.getElementById('resetForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const email = document.getElementById('email').value.trim();
    const verifyCode = document.getElementById('verify_code').value.trim();
    const newPassword = document.getElementById('new_password').value.trim();
    const confirmPassword = document.getElementById('confirm_password').value.trim();

    document.querySelectorAll('.error-msg').forEach(el => el.textContent = '');

    if (!email) {
        document.getElementById('emailError').textContent = '请输入邮箱地址';
        return;
    }

    if (!verifyCode || verifyCode.length !== 6) {
        document.getElementById('codeError').textContent = '请输入6位验证码';
        return;
    }

    if (newPassword.length < 6) {
        document.getElementById('pwdError').textContent = '新密码至少6位';
        return;
    }

    if (newPassword !== confirmPassword) {
        document.getElementById('confirmPwdError').textContent = '两次密码输入不一致';
        return;
    }

    fetch("{% url 'users:reset_password' %}", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        body: `email=${encodeURIComponent(email)}&verify_code=${encodeURIComponent(verifyCode)}&new_password=${encodeURIComponent(newPassword)}&confirm_password=${encodeURIComponent(confirmPassword)}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('密码重置成功，即将跳转到登录页');
            window.location.href = "{% url 'users:login' %}";
        } else {
            if (data.type === 'code') {
                document.getElementById('codeError').textContent = data.msg;
            } else if (data.type === 'pwd') {
                document.getElementById('pwdError').textContent = data.msg;
            } else if (data.type === 'email') {
                document.getElementById('emailError').textContent = data.msg;
            } else {
                alert(data.msg);
            }
        }
    })
    .catch(error => {
        alert('网络错误，重置失败');
    });
});
</script>

</body>
</html>